@charset "UTF-8";
@import "config";
$deg: rotate(60deg) rotate(120deg) rotate(180deg) rotate(240deg) rotate(300deg);
$iDeg: rotate(-60deg) rotate(-120deg) rotate(-180deg) rotate(-240deg) rotate(-300deg);

$degCount: length($deg)+1;


.web{
  width:100%;
  height:100%;
  background: url("../img/bg_img.png") no-repeat center;
  background-size:cover;
  .wrapper{
    margin:0 auto;
    width:hr(500);
    height:hr(500);
    position:relative;
    top:45%;
    transform: translateY(-50%);

    .center{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
      display:inline-block;
      width:hr(270);
      height:hr(270);
      text-align: center;
      line-height:hr(270);
      background:#e7c598;
      border-radius:50%;
      span{
        color:darkred;
        font-size: hr(42);
      }
    }

    @for $i from 1 to ($degCount){
      .circle_box:nth-child(#{$i+1}){
        transform:nth($deg,$i);
      }
    }
    @for $i from 1 to ($degCount){
      .circle_box:nth-child(#{$i+1}) .circle i{
        transform:nth($iDeg,$i);
      }
    }
    .circle_box{
      position:absolute;
      left:hr(200);
      width:hr(100);
      height:hr(100);
      line-height:hr(100);
      text-align: center;
      color:darkred;
      border-radius:50%;
      background:#e7c598;
      transform-origin:hr(50) hr(250);
    }
    .circle .icon-yonghu{
      display: block;
      font-size: hr(30);
    }

  }
  .word{
    position:absolute;
    bottom:hr(150);
    transform:translateX(50%);
    color:white;
    font-size: hr(30);
    text-align: center;
    em{
      display: inline-block;
      width:hr(20);
      border-bottom: 1px solid white;
    }
  }
  .home{
    position:absolute;
    bottom:hr(25);
    right:hr(54);
    .icon-shouye{
      font-size: hr(66);
      color:#e7c598;
    }
  }
}